<template>
  <div class="spe-picker">
    <van-nav-bar
      title="填写苗木信息"
      left-arrow
      @click-left="closePicker"
      fixed
      placeholder
      safe-area-inset-top
    />
    <div class="spe-content">
      <div class="item"><span>*</span>苗木形态</div>
      <div class="spe-list">
        <van-button
          v-for="(item, index) in speList"
          @click="handleSelect(index, 1)"
          :class="[selectedXtIndex === index ? 'selected' : '']"
          class="tag"
        >
          {{ item.categoryName }}
        </van-button>
      </div>
      <div class="item">规格</div>
      <div class="field-list">
        <div class="field-item" v-for="item in speList[selectedXtIndex]?.attributes">
          <div class="left"><span v-if="item.required == 1">*</span>{{ item.attributeName }}</div>
          <div class="center">
            <van-field input-align="center" v-model="item.minValue" />-<van-field
              input-align="center"
              v-model="item.maxValue"
            />
          </div>
          <div class="right">{{ item.unit }}</div>
        </div>
      </div>
      <div class="item"><span>*</span>种植类型</div>
      <div class="spe-list">
        <van-button
          v-for="(item, index) in speList[selectedXtIndex]?.plantAttributes"
          :class="[selectedLxIndex === index ? 'selected' : '']"
          class="tag"
          @click="handleSelect(index, 2)"
        >
          {{ item.plantAttributeName }}
        </van-button>
      </div>
    </div>
    <!-- 底部确认按钮 -->
    <div class="popup-footer">
      <van-button type="primary" block @click="speSubmit">完成</van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getProductCategoryAttributes } from '@/api'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  baseProductId: {
    type: String,
    default: ''
  }
})
const speList = ref([])
const selectedXtIndex = ref(0)
const selectedLxIndex = ref(0)

// 获取规格信息
const getSpeInfoData = async () => {
  try {
    const res = await getProductCategoryAttributes({
      baseProductId: props.baseProductId
    })
    if (res.code === 200) {
      speList.value = res.data
    }
  } catch (error) {
    console.error('获取规格信息失败:', error)
  }
}

// 定义组件事件
const emit = defineEmits<{
  (e: 'select', value: any, plantAttributes: any): void
  (e: 'update:show', value: false): void
}>()

// 返回
const closePicker = () => {
  emit('update:show', false)
}

const handleSelect = (index: any, type: any) => {
  if (type == 1) {
    selectedXtIndex.value = index
    selectedLxIndex.value = 0
  } else {
    selectedLxIndex.value = index
  }
}

// 提交
const speSubmit = () => {
  let valid = true
  speList.value[selectedXtIndex.value].attributes.map((item) => {
    if (item.required === '1') {
      if (!item.minValue || !item.maxValue) {
        valid = false
        return showToast(`请输入${item.attributeName}`)
      }
    }
  })

  if (valid) {
    console.log(speList.value[selectedXtIndex.value])
    emit(
      'select',
      speList.value[selectedXtIndex.value],
      speList.value[selectedXtIndex.value].plantAttributes[selectedLxIndex.value]
    )
    closePicker()
  }
}

// 监听 baseProductId 变化
watch(
  () => props.baseProductId,
  (newVal) => {
    if (newVal) {
      getSpeInfoData()
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.spe-picker {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding-top: constant(safe-area-inset-top); /* 标准 */
  padding-top: env(safe-area-inset-top); /* iOS 11.0+ */
  :deep(.van-nav-bar__title) {
    font-weight: 400;
    color: #222;
  }

  :deep(.van-nav-bar .van-icon) {
    color: #222;
  }

  // .valid-info {
  // 	display: flex;
  // 	align-items: center;
  // 	justify-content: space-between;
  // 	font-size: 14px;
  // 	line-height: 40px;
  // 	color: #999;
  // 	padding: 0 12px;

  // 	.left {
  // 		span {
  // 			color: #f1641a;
  // 		}
  // 	}
  // }

  .spe-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px;
    -webkit-overflow-scrolling: touch;
  }

  .item {
    color: #222;
    line-height: 40px;
    font-size: 14px;

    span {
      margin-right: 4px;
      color: #f1641a;
    }
  }

  .spe-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;

    .tag {
      flex: 1;
      text-align: center;
      line-height: 36px;
      font-size: 14px;
      min-width: 33%;

      &.selected {
        background: #32bc05;
        color: #fff;
      }

      &.van-hairline--surround:after {
        border-color: #999;
        border-radius: 10px;
      }
    }
  }

  .field-list {
    padding: 8px 0;

    .field-item {
      padding: 5px 0;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #222;

      .left {
        flex: 0 0 30%;

        span {
          margin-right: 4px;
          color: #f1641a;
        }
      }

      .center {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #999;
        flex: 1;
        justify-content: center;

        .van-cell {
          padding: 0;
          width: 80px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          background: #f5f5f5;
          border: 1px solid #ddd;
          border-radius: 2px;

          :deep(.van-field__control) {
            color: #999;
          }

          &.tag {
            border-color: #32bc05;
          }

          :deep(.van-field__control:disabled) {
            color: #32bc05 !important;
            -webkit-text-fill-color: #32bc05 !important;
          }
        }
      }

      .right {
        flex: 0 0 10%;
        text-align: right;
      }
    }
  }

  .tips {
    line-height: 40px;

    :deep .van-cell:after {
      border: none;
    }

    :deep(.van-collapse:after) {
      border-bottom: none;
    }

    :deep(.van-cell) {
      padding: 0;
    }

    :deep(.van-collapse-item:after) {
      border: none;
    }

    :deep(.van-collapse-item__content) {
      padding: 0;
    }
  }

  .popup-footer {
    padding: 13px 16px;
    background: #fff;
    border-top: 1px solid #f5f5f5;

    :deep(.van-button) {
      height: 45px;
      line-height: 45px;
      border-radius: 22px;
      font-size: 16px;
      background: #32bc05;
      border-color: #32bc05;
    }
  }
}
</style>
